<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>监控</title>

	<link href="../css/thirdParty/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

	<style>
		.input-append .add-on,
		.input-prepend .add-on {
			background-color: #e17a1f;!important;
		}
		.add-on>i{
			color:white;
		}
	</style>

</head>

<body id="body">
	<div class="row bg-light	">
		<div class="col-lg-12 col-sm-12 breadcrumb bg-light">
			<li class="breadcrumb-item">监控服务功能</li>
			<li class="breadcrumb-item">监控</li>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="form-inline mt-md-0 mr-2 pt-1 float-right" >
				<div class="input-group">
					<select class="custom-select custom-select-icon" id="S_SERVICE_TYPE">
						<option value = "300">Last 5 Minites</option>
						<option selected value ="1800">Last 30 Minites</option>
						<option value ="3600">Last 1 Hour</option>
						<option value ="86400">Last 24 Hour</option>
					</select>

				</div>
			</div>
			<div class="btn-group float-left my-sm-1 mr-5">
				<label class="mt-2">开始时间：</label>
				<div class="date input-append form_datetime pull-left" data-date="" data-date-format="yyyy-mm-dd HH:ii:ss" data-link-field="dtp_input1" style="">
					<input id="from_date" class="form-control calendar-input" type="text" value="" >
					<span class="add-on"><i class="icon-th iconfont"></i></span>
				</div>
				<label class="ml-3 mt-2">结束时间：</label>
				<div class="input-append date form_datetime pull-left " data-date="" data-date-format="yyyy-mm-dd HH:ii:ss" data-link-field="dtp_input1" style="">
					<input id="to_date" class="form-control calendar-input" type="text" value="" >
					<span class="add-on"><i class="icon-th iconfont"></i></span>
				</div>
				<div class="ml-3">
					<button class="btn btn-outline-success" onclick="searchService();"><i class="iconfont ibsp-chaxun mr-1"></i>搜索</button>
				</div>
			</div>
		</div>
	</div>


	<div class="container-fuild" id="ems" style="">
		<div class="row" style="">
			<div id="em1" style="height: 300px;" class="col-sm-4"></div>
			<div id="em2" style="height: 300px;" class="col-sm-4"></div>
			<div id="em3" style="height: 300px;" class="col-sm-4"></div>
		</div>
		<div class="row" style="margin-top:10px">
			<div id="em4" style="height: 300px;" class="col-sm-4"></div>
			<div id="em5" style="height: 300px;" class="col-sm-4"></div>
		</div>

	</div>
</body>

<script src="../js/thirdParty/echarts.min.js" type="text/javascript" ></script>
<script src="../js/thirdParty/bootstrap-datetimepicker.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="../js/thirdParty/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="UTF-8"></script>
<!--echarts的暗色主题包-->
<script src="../js/monitor.js" type="text/javascript"></script>

<script type="text/javascript" >

	var dropdownLi = $(".dropdown>ul>li>a"),
		dropdowna = $(".dropdown>a"),
		from_date = $("#from_date"),
		to_date    = $("#to_date"),
		ems         = $("#ems"),
		searchMonitorButton = $("#searchMonitorButton");

	dropdownLi.off("click").on("click",function(e){
		var $this = $(this),
				parentLi = $this.closest("li"),
				interval = parentLi.val(),
				now = new Date(),
				fromTime = new Date(now.getTime() - interval*1000);
		dropdowna.html('<i class="iconfont icon-shizhong"></i> ' + $this.text() + ' <b class="caret"></b>');
		from_date.val(fromTime.simpleFormat("yyyy-MM-dd hh:mm:ss"));
		to_date.val(now.simpleFormat("yyyy-MM-dd hh:mm:ss"));

		ems.mChart("reloadByTime",{startTS:fromTime.getTime(),endTS:now.getTime()});
	});

	searchMonitorButton.off("click").on("click",function(){
		var fromDate = Util.strToDate(from_date.val()),
			toDate = Util.strToDate(to_date.val());
		if(fromDate < toDate) {
			if(toDate.getTime() - fromDate.getTime() > 24*60*60*1000){
				return;
			}
			ems.mChart("reloadByTime",{interval:0,startTS:fromDate.getTime(),endTS:toDate.getTime()});
		}else{
			return;
		}
	});

	$('.form_datetime').datetimepicker({
		language:  'zh-CN',
		weekStart: 1,
		todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
	});

	$("#ems").mChart(
			{
				startTS:(new Date()).getTime() - 30*60*1000,
				endTs : (new Date()).getTime(),
				instId:"c5da7600-2fae-c42c-b1b7-dcf09f387c29",
				theme:"mytheme",
				interval:10,
				config:[
					{echartOption:{title:{text:"CPU监控(单位%)"}},param:'CPU.Used',container:"em1"},
					{echartOption:{title:{text:"内存监控(单位KB)"},series:[{type:"bar"}]},param:'MEM.Used',container:"em2"},
					{echartOption:{title:{text:"磁盘总量(单位MB)"}},param:'DISK.Total',container:"em3"},
					{echartOption:{title:{text:"磁盘使用(单位MB)"}},param:'DISK.Used',container:"em4"},
					{echartOption:{title:{text:"磁盘可用(单位MB)"}},param:'DISK.Available',container:"em5"}
				]
			}
	);

</script>
</html>
